import { SvgIcon } from '@/components/icon';
import { Button } from 'antd';
import { useNavigate } from 'react-router-dom';
import { GetDefaultListConfigList } from '@/common/types';

interface Props {
  list: GetDefaultListConfigList[];
  adminUser: boolean;
}

const ModelDefaultFailure = ({ list, adminUser }: Props) => {
  const navigate = useNavigate();

  const handleJumpModelPages = () => {
    navigate('/worklayouts/modelManage?open=true');
  };

  return (
    <div className="mb-4 h-[78px] rounded-lg border-[1px] border-solid border-@warning-color-disabled bg-@error-color-light p-4">
      <div className="mb-1 flex items-center text-sm leading-[22px]">
        <div className="flex h-6 w-6 items-center justify-center">
          <SvgIcon icon="warning" size={16} color="#FF9226" />
        </div>
        <span className="mr-2 font-semibold text-text-5">
          {adminUser ? '模型失效' : '系统默认模型失效'}
        </span>
        {adminUser && (
          <Button type="link" onClick={handleJumpModelPages}>
            立即处理
          </Button>
        )}
      </div>
      <div className="flex">
        <div className="h-6 w-6" />
        <span className="text-xs leading-5 text-text-3">
          {adminUser
            ? '当前系统模型已失效，已有应用已无法正常使用，请及时处理'
            : `当前系统模型已失效，您的${list
                .slice(0, 3)
                .map(
                  (item, index) => `${item.name}${index < list.slice(0, 3).length - 1 ? '、' : ''}`,
                )}${
                list.length > 3 ? `等${list.length - 3}个` : ''
              }应用已无法正常使用，请联系系统管理员处理`}
        </span>
      </div>
    </div>
  );
};

export default ModelDefaultFailure;
